<template>
  <div>
    <div class="carousel-out">
      <el-carousel height="60vh" style="margin-top: 64px" class="carousel">
        <el-carousel-item v-for="(item, index) in carouselList" :key="item.img">
          <div style="position: relative">
            <img
              ref="img"
              style="width: 100%; height: 60vh"
              :src="item.img"
              alt=""
            />
            <div class="font-block">
              <div>
                <span class="index">{{ index + 1 }}</span
                >/ 3
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="desc">{{ item.desc }}</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="flex-center keyword">
        <el-autocomplete
          class="inline-input"
          style="width: 40vw"
          v-model="keywords"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <h3>个人推荐</h3>
    <div class="funList">
      <div
        @click="toDetail(item)"
        v-for="(item, index) in funList"
        :key="index"
      >
        <div style="border: 4px solid #ff9d00">
          <img :src="item.pics[0]" alt="" />
          <div style="padding: 0 12px;">
            
          <div class="desc">{{ item.funDesc }}</div>
          <div class="flex-between">
            <div class="name">{{ item.funName }}</div>
          </div>
          <div class="flex-center" style="gap: 10px">
            <div class="price">
              <span style="font-size: 12px; margin-right: 5px">普通价</span
              >{{ item.price }}
            </div>
            <div class="price">
              <span style="font-size: 12px; margin-right: 5px">会员价</span
              >{{ item.priceVip }}
            </div>
          </div>
          <el-rate
            v-if="item.rate"
            v-model="item.rate"
            disabled
            show-score
            text-color="#ff9900"
            :score-template="item.rate + ''"
          >
          </el-rate>
          <div v-else>
            暂无评分
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFun, getUserInfo } from "../service";
export default {
  name: "Home",
  data() {
    return {
      keywords: "",
      allFuns: [],
      carouselList: [
        {
          img: require("../assets/images/carousel1.jpg"),
          title: "洪崖洞",
          desc: "别具一格的“立体式空中步行街”，成为具有层次与质感的城市景区、商业中心",
        },
        {
          img: require("../assets/images/carousel2.jpg"),
          title: "广州小蛮腰",
          desc: "广州塔有5个功能区和多种游乐设施，包括户外观景平台、摩天轮、极速云霄游乐项目，有2个观光大厅，有悬空走廊，天梯，4D和3D动感影院，中西美食，会展设施，购物商场及科普展示厅。",
        },
        {
          img: require("../assets/images/carousel3.jpg"),
          title: "故宫",
          desc: "北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。",
        }
      ],
      fourBlocks: [
        {
          titleCn: "运动保健型",
          path: "/list",
          img: require("../assets/images/ydbj.jpg"),
        },
        {
          titleCn: "游乐刺激型",
          path: "/list",
          img: require("../assets/images/ylcj.jpg"),
        },
        {
          titleCn: "观赏体验型",
          path: "/list",
          img: require("../assets/images/gsty.jpg"),
        },
        {
          titleCn: "文化休闲型",
          path: "/list",
          img: require("../assets/images/whxx.jpg"),
        },
      ],
      funList: [],
      userInfo: {},
    };
  },
  mounted() {
    let ls = localStorage.getItem("meiyaWebInfo");
    if (ls) {
      this.userInfo = JSON.parse(ls);
      if (this.userInfo._id) {
        getUserInfo(this.userInfo._id).then((res) => {
          this.userInfo = {
            ...res.data,
          };
          this.form = {
            ...this.userInfo,
          };
          this.getFun()
        });
      }
    }
  },
  methods: {
    routeJump(path, e) {
      if (!path) {
        return;
      }
      if (path.indexOf("#") === -1) {
        // 滚动条返回顶部
        $("body,html").animate(
          {
            scrollTop: 0,
          },
          100
        );
      }
      this.$router.push({
        path,
      });
      if (this.$refs.dropMenu) {
        this.$refs.dropMenu.style.top = "-61vh";
      }
    },
    getFun() {
      this.funList = [];
      getFun().then((res) => {
        let arr = []
        for (let item of res.data) {
          let obj = {
            ...item.funInfo,
            comments: item.comments
          }
          obj.value = obj.funName;
          obj.pics = obj.pics.split(",");
          let likes = this.userInfo.likes.split(",");
          let types = obj.types.split(",");
          let jj = likes.filter((v) => {
            return types.includes(v);
          });
          if (jj.length) {
            this.funList.push(obj);
          }
          obj.rate = 0;
          let sum = 0;
          let score = 0;
          for (let c of obj.comments) {
            sum++;
            score += (c.mjfw + c.ywty) / 2;
          }
          if (sum) {
            obj.rate = Number((score / sum).toFixed(1));
          }
          arr.push(obj)
        }
        this.allFuns = arr;
      });
    },
    toDetail(params) {
      this.$router.push({
        name: "Detail",
        params: {
          id: params._id,
        },
      });
      localStorage.setItem(
        "meiyaFunDetail",
        JSON.stringify({
          id: params._id,
        })
      );
    },
    querySearch(queryString, cb) {
      var results = queryString
        ? this.allFuns.filter(this.createFilter(queryString))
        : this.allFuns;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.indexOf(queryString) > -1;
      };
    },
    handleSelect(v) {
      this.toDetail(v);
    },
  },
};
</script>
<style lang="scss" scoped>
.mb50 {
  font-size: 48px;
  line-height: 50px;
  text-align: center;
}
.carousel-font {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 10%;
  color: #fff;
  & > div:first-child {
    font-size: 16px;
    margin-bottom: 10px;
    color: #bbbbbb;
  }

  & > div:nth-child(2) {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  & > div:last-child {
    font-size: 18px;
  }
}
.four-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 16px 16px 16px;

  .font {
    width: 520px;
    text-align: center;
    position: absolute;
    top: 20px;
    z-index: 99;
    left: 50%;
    margin-left: -260px;
    .gray {
      color: rgba(0, 0, 0, 0.45);
      font-weight: 400;
      line-height: 26px;
    }
    .titleEn {
      margin-bottom: 8px;
      font-size: 26px;
      line-height: 44px;
      font-family: "SourceHanSansCN-Regular";
      text-align: center;
      font-weight: 500;
      font-weight: bold;
    }
    .titleCn {
      font-size: 20px;
      line-height: 24px;
      font-weight: 500;
    }
  }
  & > div {
    position: relative;
    width: calc(50vw - 30px);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 16px;
    img {
      width: 100%;
    }
  }
}
.carousel-out {
  position: relative;
  width: 100%;
  height: 60vh;
  .keyword {
    position: absolute;
    top: 20vh;
    left: 25vw;
    z-index: 99;
    width: 40vw;
    gap: 20px;
  }
}
.carousel {
  .font-block {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    color: #fff;
    font-weight: bold;

    .index {
      font-size: 24px;
      margin-right: 5px;
    }

    & > div {
      text-align: right;
      margin-bottom: 5px;
    }
  }
}

h3 {
  width: 100%;
  margin: 20px 0;
  text-align: center;
}
.funList {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  & > div {
    width: 22%;
    margin-bottom: 10px;
    font-size: 14px;
    transform: all 0.3s;
    cursor: pointer;

    img {
      width: 100%;
      height: 200px;
    }

    .desc {
      margin: 10px auto;
    }
    .name {
      font-weight: bold;
    }
    .price {
      font-size: 16px;
      color: red;
    }
  }

  & > div:hover {
    box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.3);
  }
}
</style>
